<template>
  <view class="index" id="teacher">
    <view class="header-img">
      <!-- 宝宝信息 -->
      <view class="baby-info">
        <!-- 头像+名称+年龄 -->
        <view class="baby">
          <u-image
            width="153rpx"
            height="153rpx"
            :lazy-load="true"
            :src="vuex_userInfo.avatar"
            shape="circle"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>

          <view class="baby-i">
            <view class="baby-name">{{ fristName }}</view>
            <view>
              <image
                style="width: 24rpx; height: 24rpx; margin-right: 5rpx"
                src="@/static/children/children.png"
                shape="circle"
              ></image>
              <view>{{ user_data.school_name }}</view>
            </view>
          </view>
        </view>
        <!-- 期末报告 -->
        <view class="report">
          <view>
            <u-button
              :custom-style="customStyle"
              shape="circle"
              @click="type == '3' ? (show = true) : (show = false)"
              >{{ classname }}</u-button
            >
          </view>
          <view class="u-line-1">{{ classTitle }}</view>
        </view>
      </view>

      <u-section
        title="学生信息"
        :sub-title="classTeacher"
        :style="{ margin: '30rpx' }"
        color="#07C38F"
        sub-color="#07C38F"
        :arrow="false"
      ></u-section>
      <!-- 学生信息 -->
      <view class="baby-list" v-for="(item, index) in babyList" :key="index">
        <view> {{ item.name }}</view>
        <view @click="view(item)">查看 ></view>
      </view>
    </view>

    <!-- 校长修改 -->
    <u-select
      v-model="show"
      :list="classList"
      value-name="class_id"
      label-name="class_name"
      @confirm="changeClass"
    ></u-select>
  </view>
</template>

<script>
export default {
  props: {
    type: String,
  },
  data() {
    return {
      show: false,
      isAliipcat: false, //是否申请
      src: "https://s1.ax1x.com/2020/11/05/BREIu6.jpg",
      customStyle: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        height: "68rpx",
      },
      classList: [], //教室list
      classTitle: "您所在班级",
      babyList: [],
      user_data: {},
      fristName: "",
      classTeacher: "负责老师：刘闯",
      classname: "", //第一次默认第一个
    };
  },
  watch: {
    type: {
      handler(newV, oldV) {
        // 校长
        if (newV === "3") {
          this.classTitle = "当前选择的班级";
          this.getPrincipal();
        } else if (newV === "2") {
          // 老师
          this.classTeacher = ""; //不展示指导老师
          this.getTeacherInfo();
        }
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * 获取校长信息
     */
    getPrincipal() {
      var form = {
        id: this.vuex_userInfo.id,
      };
      this.$u.api.getPrincipalClassApi(form).then((res) => {
        this.babyList = res.data.student_data;
        this.user_data = res.data.user_data;
        this.fristName = res.data.user_data.name.substr(0, 1) + "校长,您好！";
        this.classname = res.data.class_data[0].class_name;
        this.classList = res.data.class_data;
        // 拿到第一个教室老师姓名
        this.classTeacher = "负责老师：" + res.data.class_data[0].teacher_name;

        // 存校长名称
        var userInfo = this.vuex_userInfo;
        userInfo.name = this.fristName;
        this.$u.vuex("vuex_userInfo", userInfo);
        //存校长信息
        this.$u.vuex("vuex_principal", res.data.user_data);
      });
    },

    /**
     * 获取；老师信息
     */
    getTeacherInfo() {
      var form = {
        id: this.vuex_userInfo.id,
      };
      this.$u.api.getTeacherApi(form).then((res) => {
        this.user_data = res.data.user_data;
        this.babyList = res.data.student_data;
        this.fristName = res.data.user_data.name.substr(0, 1) + "老师,您好！";
        this.classname = res.data.class_data[0].class_name;
        this.classList = res.data.class_data;

        // 存老师名称
        var userInfo = this.vuex_userInfo;
        userInfo.name = this.fristName;
        this.$u.vuex("vuex_userInfo", userInfo);

        //修改老师信息class_id
        res.data.user_data.class_id = res.data.class_data[0].class_id;
        res.data.user_data.class_name = res.data.class_data[0].class_name;

        //存老师信息
        this.$u.vuex("vuex_teacher", res.data.user_data);
      });
    },

    /**
     * 查看学生
     */
    view(Info) {
      var userInfo = this.vuex_userInfo;
      userInfo.baby_id = Info.baby_id;
      this.$u.vuex("vuex_userInfo", userInfo);

      uni.navigateTo({
        url: "/pages/index/index",
      });
    },

    /**
     * 更换班级
     */
    changeClass(e) {
      var form = {
        class_id: e[0].value,
      };
      this.$u.api.getClassBabyApi(form).then((res) => {
        this.babyList = res.data;
        // 更换班级信息
        this.classList.forEach((element) => {
          if (element.class_id === e[0].value) {
            this.classTeacher = "负责老师：" + element.teacher_name;
            this.classname = element.class_name;
          }
        });
      });
    },
  },
  created() {
    // console.log(111111111111);
  },
};
</script>

<style scoped lang ='scss' >
.index {
  background-color: #f7f7f7;
  min-height: 93vh;

  .header-img {
    background-image: url("@/static/index/header.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 50rpx 20rpx;
    height: auto;
    .baby-info {
      height: 220rpx;
      background-color: #ffffff;
      border-radius: 36rpx;
      padding: 18 * 2rpx 15.5 * 2rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 50rpx;
      box-shadow: 5rpx 7rpx 8rpx 0rpx rgba(110, 110, 110, 0.32);

      .baby {
        display: flex;
        flex-direction: row;
        align-items: center;
        .baby-i {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          .baby-name {
            color: #000000;
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          & > view:nth-child(2),
          & > view:nth-child(3) {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #000000;
            font-size: 24rpx;
            margin-top: 5rpx;
            margin-bottom: 5rpx;
          }
        }
      }
      .report {
        text-align: center;
        & > view:nth-child(1) {
          width: 180rpx;
        }
        & > view:nth-child(2) {
          margin-top: 5rpx;
          color: #999999;
          font-size: 20rpx;
        }
      }
    }
    .baby-list {
      background-color: green;
      border-radius: 36rpx;
      padding: 20rpx;
      margin: 0 40rpx 30rpx 40rpx;
      display: flex;
      font-size: 28rpx;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      background-image: linear-gradient(to right, #07c38f, #65b69f);
      box-shadow: 5rpx 7rpx 8rpx 0rpx rgba(110, 110, 110, 0.32);
    }
  }
}
</style>
